<template>
  <div id="waste-unit-num-chart"></div>
</template>
<script setup>
import * as echarts from "echarts";
import resize from "@/mixin/resize.js";
import { getCurrentInstance } from "vue";
let myChart = shallowRef();
let props = defineProps(["lineData"]);
let x = ref([]);
let y = ref([]);

watch(
  () => props.lineData,
  () => {
    x.value = props.lineData.x;
    y.value = props.lineData.y;
    getServerData();
  },
  { deep: true }
);
onMounted(() => {
  myChart.value = echarts.init(document.getElementById("waste-unit-num-chart"));
  resize(myChart.value);
  // resize(myChart.value)
  getServerData();
});

let getServerData = () => {
  myChart.value.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line", // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
        snap: false, // 坐标轴指示器是否自动吸附到点上。默认自动判断。
      },
      textStyle: {
        color: "#666", // 文字的颜色
        fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
        fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
        fontSize: "20", // 文字字体大小
        lineHeight: "50", // 行高
      },
    },
    toolbox: {
      right: "5%",
      itemSize: 18,
      feature: {
        dataView: {
          show: true, // 是否显示工具
          title: "数据视图",
        },
        magicType: {
          title: "图表类型切换",
          type: ["line", "bar"], //图表类型切换
        },
        icon: "circle",
        saveAsImage: {
          show: true,
          title: "保持图片",
        },
      },

      top: "-2%",
    },
    grid: {
      top: "15%",
      left: "2%",
      right: "2%",
      bottom: "16%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: x.value,
      axisLabel: {
        color: "#666",
        fontSize: 19,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#ccc",
          width: 2,
        },
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        show: true,
        type: "value",
        name: "(吨)",
        fontSize: 19,
        nameTextStyle: {
          color: "#666",
          fontSize: 19,
          padding: [0, 10, 10, -50],
        },
        axisLabel: {
          color: "#666",
          fontSize: 19,
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true, // 是否显示坐标轴轴线
          // symbol: ['none', 'arrow'],     // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
          // symbolSize: [10, 15],     // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
          lineStyle: {
            color: "#ccc", // 坐标轴线线的颜色
            width: "2", // 坐标轴线线宽
            type: "solid", // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
          },
        },
      },
    ],
    series: [
      {
        type: "line",
        showSymbol: false, //是否显示symbol
        smooth: true,
        symbolSize: 8,

        itemStyle: {
          color: "#0066FF",
          borderColor: "#0066FF",
          borderWidth: 3,
        },
        areaStyle: {
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#8EBBFF", //0066FF
                },

                {
                  offset: 1,
                  color: "#fff",
                },
              ],
              false
            ),
          },
        },
        data: y.value,
      },
    ],
  });
};
</script>
<style lang="scss" scoped>
#waste-unit-num-chart {
  width: 100%;
  margin-top: 2vh;
  height: 360px;
}
</style>
